<template>
  <div class="content">
    <div class="toper">
      <div class="back" @click="$router.back()">
        <van-icon name="arrow-left" color="#fff" size="24px" />
      </div>
    </div>
    <div class="contact_Title">
      <h3>联系客服</h3>
      <p><span>工作时间：9:00 - 17:00</span></p>
    </div>
    <div class="contact_chart">
          聊天区
    </div>
    <div class="contact_tucao">
      <van-button type="primary" size="normal" color="rgb(211, 209, 209)">订单</van-button>
      <van-button type="primary" size="normal" color="rgb(211, 209, 209)">售后</van-button>
    </div>
    <div class="footer-content">
      <van-field
        v-model="inputText"
        center
        clearable
      />
      <van-button size="small" type="primary">发送</van-button>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Icon, Button, Field } from 'vant'

Vue.use(Icon)
Vue.use(Button)
Vue.use(Field)

export default {
  data () {
    return {
      inputText: ''
    }
  },
  components: {
  }
}
</script>

<style lang="scss" scoped>
.toper{
  padding: 0.1rem 0.1rem;
  .back{
    width:0.4rem;
    height:0.4rem;
    border-radius: 50%;
    background-color: #666;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.contact_Title{
  height: 0.6rem;
  padding-left:0.1rem;
  h3{
    font-size: 18px;
    font-weight:bold;
    padding-bottom: 5px;
  }
}
.contact_chart{
  height:3.6rem;
  background-color:rgb(211, 209, 209);
  border-radius:10px;
  margin:0 0.2rem;
  margin-bottom: 0.4rem;
}
.contact_tucao{
  height: 0.46rem;
  font-size: 16px;
  color: #FFFFFF;
  margin:0 0.2rem;
  .van-button{
    margin-left: 0.2rem;
    width:0.8rem;
    height:0.36rem;
  }
}
.footer-content{
  display:flex;
  margin:10px 20px;
  padding:10px 12px;
  border: 1px solid rgb(236, 234, 234);
  border-radius:3px;
  .van-filed{
    height:0.4rem;
    border-bottom:2px solid #666;
  }
  .van-button{
    width:0.7rem;
    height:0.36rem;
    margin-top:6px;
    margin-left:14px;
    background-color:rgb(211, 209, 209);
    border:1px solid rgb(252, 249, 249);
  }
  }
</style>
